<template>
  <div class="AllSkill">
    <div v-for="(item, i) in skill"
         :key="i"
         class="skill"
         @click="openEject(item)">
      <ImgShow :name="item.name"
               :icon="$upload+item.icon"
               :size="70"></ImgShow>
    </div>
    <div v-if="isEject">
      <van-popup v-model="isEject"
                 position="bottom"
                 round
                 transition-appear>
        <div class="icon">
          <ImgShow :icon="$upload+ejectShow.icon"
                   :size="70" />
        </div>
        <div class="main">
          <div class="name">
            【技能名称】
            {{ejectShow.name}}
          </div>
          <div class="level">
            【解锁等级】
            {{ejectShow.level}}
          </div>
          <div class="id">
            【技能描述】
            {{ejectShow.descript}}
          </div>
          <div class="pic">
            <img v-for="(pic, i) in ejectShow.picture"
                 :key="i"
                 :src="$upload+pic" />
          </div>
        </div>

      </van-popup>
    </div>
  </div>
</template>

<script>
import ImgShow from '../utils/ImgShow.vue'
import { getSkill } from '@/api/introduction'
export default {
  components: { ImgShow },
  data () {
    return {
      skill: [],
      isEject: false,
      ejectShow: {}
    }
  },
  methods: {
    fetch () {
      getSkill().then(res => {
        this.skill = res.data
      })
    },
    openEject (item) {
      this.ejectShow = item
      this.isEject = !this.isEject
    }
  },
  created () {
    this.fetch()
  }
}
</script>
<style lang="less" scoped>
.van-radio-group {
  display: flex;
  justify-content: space-around;
}
.AllSkill {
  margin-top: 20px;
  padding-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  .skill {
    margin-top: 10px;
    width: 25%;
    height: 85px;
  }
}
.van-popup {
  .pic {
    margin-top: 5px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
